const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack');
const {CleanWebpackPlugin}  = require('clean-webpack-plugin')
const CopyWebpackPlugin  = require('copy-webpack-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');//优化css
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//优化css
const TerserPlugin = require("terser-webpack-plugin");//压缩js体积
/** @type {import('webpack').Configuration} */
const config={
    mode:"production",
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'./dist')
        },
    module:{
        rules:[
            {
                test:/\.js$/,
                use:['babel-loader']
            },
            {
                test: /.s?css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            }
        ],
    },   
    devServer:{
        hot:true
    },
    plugins:[ 
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'index.html'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin( {
            patterns: [
            { from: path.join(__dirname,'assets'), to: path.join(__dirname,'dist') },
          ]}),
        new MiniCssExtractPlugin({
            filename:'[name].css',
            chunkFilename:'[id].css'
        })
    ],
    optimization: {
        minimize: true,
        minimizer: [
          new TerserPlugin(),
          new CssMinimizerPlugin()
        ],
    },
}
module.exports = config